<template>
	<view class="content">
		<view class="title">让TA做什么</view>
		<view class="form-item">
			<label class="form-label">需求标题</label>
			<uni-easyinput class="form-input" type="text" v-model="formData.title" placeholder="例：XX公司招聘XX兼职"
				:inputBorder="false" :placeholderStyle="placeholderStyle" />
		</view>
		<view class="form-item">
			<label class="form-label">需求人数</label>
			<uni-easyinput class="form-input" type="text" v-model="formData.num" placeholder="请填写招聘人数"
				:inputBorder="false" :placeholderStyle="placeholderStyle" />
		</view>
		<view class="form-item">
			<label class="form-label">联系电话</label>
			<uni-easyinput class="form-input" type="text" v-model="formData.tel" placeholder="请填写联系电话"
				:inputBorder="false" :placeholderStyle="placeholderStyle" />
		</view>

		<view class="form-title">需求描述<label class="del-btn">删除</label></view>
		<uni-easyinput type="textarea" autoHeight v-model="formData.content" :inputBorder="false"
			:placeholderStyle="placeholderStyle" placeholder="请输入需求内容与需求要求，如需要兼职人员完成什么工作，对兼职人员的要求是什么，薪酬福利说明等">
		</uni-easyinput>
		<view class="form-title">添加图片<label class="form-tips">(最多添加4张，第一张默认为封面)</label></view>
		<uni-file-picker v-model="formData.imglist" limit="4" @select="onImagesSelect">
		</uni-file-picker>
		<button type="default" :disabled="disabled" class="publish-btn" @click="onPublishClick">发布</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				placeholderStyle: 'font-size:28rpx;color:#d2d2d2;text-align: right',
				formData: {
					title:"",
					num:"",
					tel:"",
					imglist:[]
				},
			}
		},
		methods: {
			onImagesSelect:function(e){
				console.log(e)
				//调图片上传接口
				uni.uploadFile({})
			},
			onPublishClick: function() {
				if (!this.formData.title) {
					return;
				}
				if (!this.formData.num) {
					return;
				}
				if (!this.formData.tel) {
					return;
				}
				// 调提交数据接口
				// 提交成功跳页面
				uni.navigateTo({
					url: '/pages/index/publishFail'
				})
			}
		}
	}
</script>

<style>
	.content {
		margin: 0 32rpx;

	}

	.title {
		font-size: 34rpx;
		font-weight: 500;
		color: #181818;
		margin: 32rpx 0 40rpx 0;
	}

	.form-item {
		display: flex;
		line-height: 76rpx;
		background: #F4F4F4;
		border-radius: 4rpx;
		padding: 0 28rpx;
		margin-bottom: 28rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #7B7B7B;
		margin-right: 20rpx;
	}

	.form-input {
		flex: 1;
	}

	.form-title {
		margin: 30rpx 0;
		font-size: 28rpx;
		color: #181818;
	}

	.form-tips {
		color: #7B7B7B;
	}

	.del-btn {
		float: right;
		background: url(../../static/images/icon_shanchu@3x.png) left center no-repeat #FFFFFF;
		background-size: 24rpx;
		display: inline-flex;
		padding-left: 28rpx;
		font-size: 24rpx;
		color: #acacac;
	}

	.uni-easyinput__content-textarea {
		background-color: #F4F4F4;
		border-radius: 4rpx;
		padding: 28rpx;
	}

	.publish-btn {
		margin: 98rpx auto !important;
	}
</style>
